<template>
  <div class="base-ring">
    <div>
      <div id="main" style="width: 15rem;height:10rem;"></div>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
// require('echarts/lib/component/toolbox')
export default {
  props: {
    rate: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data () {
    return {
      data: [
        {
          name: "完成及时率",
          value: 1,
        },
        {
          name: "派单及时率",
          value: 1,
        },
        {
          name: "接单及时率",
          value: 1,
        }
      ],
      // data: this.rate,
      // colorArr: ['#53ED73', '#FFEA00', '#3FFFEA', '#E56F82'],//各饼图颜色
      exchangeChart: null,
      sumValue: 0
    }
  },
  mounted() {
    this._getchartData()
  },
  watch: {
    rate(value) {
      
    }
  },
  methods: {
    getArrayValue(array, key) {
        var key = key || "value";
        var res = [];
        if (array) {
            array.forEach(function(t) {
                res.push(t[key]);
            });
        }
        return res;
    },
    array2obj(array,key) {
      var resObj = {};
      for(var i=0;i<array.length;i++){
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    },
    getData(data) {
        var res = {
            series: [],
            yAxis: []
        };
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "65%"],
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false
              },
              borderWidth: 5,
            },
            data: [
              {
                value: data[i].value * 100,
                name: data[i].name
              }, 
              {
                // value: this.sumValue - data[i].value,
                value: 100 - data[i].value * 100,
                name: '',
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0
                },
                tooltip: {
                  show: false
                },
                hoverAnimation: false
              }
            ]
          });
          res.series.push({
            name: '背景',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
            center: ["30%", "65%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 10,
                itemStyle: {
                    color: "rgba(26,51,72,1)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, 
            // {
            //   value: 2.5,
            //   name: '',
            //   itemStyle: {
            //       color: "rgba(0,0,0,0)",
            //       borderWidth: 0
            //   },
            //   tooltip: {
            //       show: false
            //   },
            //   hoverAnimation: false
            // }
          ]
        });
        // res.yAxis.push((data[i].value / this.sumValue * 100).toFixed(2) + "%")
        res.yAxis.push((data[i].value))
      }
      return res;
    },
    _getchartData() {
      // console.log(this.rate)
      this.data = this.rate
      let arrName = this.getArrayValue(this.data, "name")
      let arrValue = this.getArrayValue(this.data, "value")
      // this.sumValue = eval(arrValue.join('+'))
      let objData = this.array2obj(this.data, "name")
      let optionData = this.getData(this.data)
      let option = {
          legend: {
              show: true,
              top: "40%",
              left: '60%',
              data: arrName,
              itemWidth: 20,
              itemHeight: 10,
              width:50,
              padding: [0, 5],
              itemGap: 10,
              formatter: function(name) {
                return "{title|" + name + "}\n{value|" + (objData[name].value * 100) + "%}"
              },
              textStyle: {
                rich: {
                    title: {
                        fontSize: 10,
                        lineHeight: 10,
                        color: "#fff"
                    },
                    value: {
                        fontSize: 10,
                        lineHeight: 12,
                        color: "#fff"
                    }
                }
              },
          },
          tooltip: {
              show: false,
              trigger: "item",
              formatter: "{a}<br>{b}:{c}({d}%)"
          },
          color: ['#53ED73', '#FFEA00', '#3FFFEA', '#E56F82'],
          grid: {
              top: '30%',
              bottom: '48%',
              left: "30%",
              containLabel: false
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                  color: "#fff",
                  fontSize: 10,
              },
              show: false
            },
            data: optionData.yAxis
        }],
        xAxis: [{
            show: false
        }],
        series: optionData.series
      }
      this.activeChart = echarts.init(document.getElementById('main'))
      this.activeChart.setOption(option)
    },
  }
}
</script>

<style lang="scss">
.base-ring {
  
}
</style>>
